<template>
  <div class="page-article" v-if="model">
    <div class="d-flex py-3   px-2">
      <strong @click="$router.go(-1)" class="iconfont text-info-1 icon-back fs-xl"></strong>
      <strong class="flex-1 text-info-1 title-item" style="padding:1px;">{{ model.title }}</strong>
      <div class="fs-xs text-grey-1 title-date pt-1">2019/06/19</div>
    </div>

    <!-- 内容 -->
    <div style="line-height: 2.2rem">
      <div v-html="model.body" class="page-body fs-xl px-3"></div>
      <div class="my-3 py-3 px-3 border-top">
        <div class="d-flex ai-center">
          <i class="iconfont icon-menu">
            <strong class="text-info-1 ml-2" style="font-size: 1.0769rem;">相关资讯</strong>
          </i>
        </div>
        <router-link
          style=" overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
          :to="`/articles/${item._id}`"
          tag="div"
          v-for=" item in model.related"
          :key="item.id"
        >{{item.title}}</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      required: true
    }
  },
  data() {
    return {
      model: ""
    };
  },
  watch: {
      id: "fetch"
  },
  methods: {
    async fetch() {
      const response = await this.$http.get(`articles/${this.id}`);
      this.model = response.data;
    }
  },
  created() {
    this.fetch();
  }
};
</script>

<style lang="scss" scoped>
.title-date {
  position: absolute;
  right: 0.7692rem;
}

.page-article {
  .page-body {
    border-top: 1px solid #d4d4d5;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  iframe {
    width: 100%;
    height: auto;
  }
}
</style>